import React, { useState } from 'react'
import '../../../scss/fan/phone.scss'
import { Button, Input, Form, Toast, Overlay, PasswordInput, Dialog } from 'react-vant';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
export default function () {
  let navigate = useNavigate()
  let [tel, settel] = useState()
  let [code, setcode] = useState()
  const [show, setShow] = useState(false);
  let phone = () => {
    return (
      <span style={{ color: '#000', fontSize: '16px' }} onClick={() => setVisible(true)}>86+</span>
    )
  }
  let capture = () => {

    axios.post('http://localhost:3000/users/get_sms', { phone: tel }).then(res => {
      console.log(tel);
      console.log(res.data.code);
      if (res.data.code == 1) {
        Toast('你电话号？？？');
      }
      if (res.data.code == 0) {
        setcode(res.data.sms)
        Toast('验证码已发送');
        setShow(true)
      }
    })
  }
  let codeshow = () => {
    const onSubmit = (val) => {
      if (val == code) {
        axios.post('http://localhost:3000/users/phone', { phone: tel }).then(res => {
          localStorage.setItem('accessToken', JSON.stringify(res.data.accessToken))
          localStorage.setItem('user', JSON.stringify(res.data.data))
          Toast('登录成功');
          setShow(false)
          navigate('/waichu')
        })
      } else {
        Dialog.alert({
          message: '验证码错误',
        });
      }

    };
    return <PasswordInput value="" mask={false} onSubmit={onSubmit} />;
  }
  return (
    <div className='phone'>
      <Input
        prefix={phone()}
        type='phone'
        placeholder='请输入密码'
        onChange={(e) => settel(e)}
      />

      <Button type='primary' block onClick={capture}>获取验证码</Button>

      <Overlay visible={show} onClick={() => setShow(false)} >
        <h1>请输入验证码</h1>
        {codeshow()}
      </Overlay>

    </div>
  )
}
